<template>
  <div>
    <div class="cardmessage">
      <a-row style="padding-top: 10vh;margin-bottom: 20px;">
        <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">确认转账信息</a-col>
      </a-row>
      <a-form :form="cashform" @submit="handleSubmit">
      <div style="padding-top: 10px">
        <a-form-item label="收款人" v-bind="formItemLayout">
          <div class="cardmsg">
            {{seat.transName | namefilter}}
            <span
              v-if='memberType == "CU"'
            >（{{seat.transMobileNo | mobileNofilters}}）</span>
            <span v-if='memberType == "CB"'>（{{seat.transMobileNo | emailfilter}}）</span>
          </div>
        </a-form-item>

        <a-form-item label="转账金额" v-bind="formItemLayout">
          <div class="cardmsg">
            <span
              style="color: #279e71;font-size:18px;font-weight: bolder;"
            >{{seat.amount | amountfilter}}</span>&ensp;元
          </div>
        </a-form-item>
        <a-form-item label="转账说明" v-bind="formItemLayout">
          <div class="cardmsg">{{Transfer}}</div>
        </a-form-item>
        <a-form-item label="支付密码" v-bind="formItemLayout">
          <div id="paypwd">
            <vue-pay-pwd :isCursor="isCursor" :pwdWidth="250" :pwdHeight="38" :getPassword="payPw"></vue-pay-pwd>&ensp;&ensp;
            <div>
              <router-link
                style="font-size:14px;color: #156ec1;"
                to="/per/safeset/modifypayindex"
              >忘记密码？</router-link>
            </div>
          </div>
        </a-form-item>
        <div v-if="ifcode">
            <a-row>
              <a-col
                :xs="{ span : 24 }"
                :sm="{ span:17,offset:7 }"
                style="text-align: left;margin-bottom: 15px;"
              ></a-col>
            </a-row>
            <a-form-item label="手机号" v-bind="formItemLayout">
              <div style="text-align: left;">
                {{seat.mobileNo | mobileNofilters}}
                <a-button
                  style="margin-left: 20px;color:#279e71;border-color:#279e71;font-size: 14px;"
                  @click="sendcode"
                  v-if="issend"
                >发送验证码</a-button>
                <a-button
                  style="margin-left: 20px;"
                  v-if="!issend"
                  disabled
                  type="primary"
                >{{ count }}s后可再次发送</a-button>
              </div>
            </a-form-item>
            <a-form-item label="验证码" :label-col="{ span: 6 }" :wrapper-col="{ span: 6,offset:1 }">
              <a-input
                v-decorator="[
                      'usercode',
                      { rules: [{
                    required: true,
                    whitespace: true,
                    message: '请输入验证码' },{validator: validateCode}],
                    validateTrigger: 'blur'
                    }
                ]"
                size="large"
                placeholder="请输入验证码"
              ></a-input>
            </a-form-item>
        </div>
      </div>
      
        <!-- <div class="cardpwd">
          <div v-if="phoneVerify">
            <a-row>
              <a-col
                :xs="{ span : 24 }"
                :sm="{ span:17,offset:7 }"
                style="text-align: left;margin-bottom: 15px;"
              ></a-col>
            </a-row>
            <a-form-item label="手机号" v-bind="formItemLayout">
              <div style="text-align: left;">
                {{seat.mobileNo | mobileNofilters}}
                <a-button
                  style="margin-left: 20px;color:#279e71;border-color:#279e71;font-size: 14px;"
                  @click="sendcode"
                  v-if="issend"
                >发送验证码</a-button>
                <a-button
                  style="margin-left: 20px;"
                  v-if="!issend"
                  disabled
                  type="primary"
                >{{ count }}s后可再次发送</a-button>
              </div>
            </a-form-item>
            <a-form-item label="验证码" :label-col="{ span: 6 }" :wrapper-col="{ span: 6,offset:1 }">
              <a-input
                v-decorator="[
                      'usercode',
                      { rules: [{
                    required: true,
                    whitespace: true,
                    message: '请输入验证码' },{validator: validateCode}],
                    validateTrigger: 'blur'
                    }
                ]"
                size="large"
                placeholder="请输入验证码"
              ></a-input>
            </a-form-item>
          </div>
          <div></div>
        </div> -->
        <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:7 }">
            <div class="next-ok">
              <a-button type="primary" html-type="submit">确认转账</a-button>
              <div style="margin-left: 15px;">
                <router-link style="color:#156ec1;" to="/allPayment">返回修改</router-link>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>
import api from "@/common/api";
import Vue from "vue";
import { JSEncrypt } from "jsencrypt";
import vuePayPwd from "vue-pay-pwd";
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18, offset: 1 },
          md: { span: 10, offset: 1 }
        }
      },
      seat: "",
      Transfer: "",
      amountSum: "",
      phoneVerify: false,
      ifcode: false,
      phonenum: "",
      cardusername: "",
      cardname: "",
      cardid: "",
      cashform: this.$form.createForm(this),
      issend: true,
      userpw: "",
      isCursor: true, //是否开启光标
      count: 30,
      codeMsg: "获取验证码",
      timer: "",
      buttonStyle: {
        background: "#279e71"
      },
      memberType: ""
    };
  },
  filters: {
    namefilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    mobileNofilters(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    amountfilter(value) {
      return parseFloat(value / 100).toFixed(2);
    },
    emailfilter(value) {
      if (value) {
        let len = value.indexOf("@") - 2;
       
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          value.substring(0, 1) +
          arrstring +
          value.substring(value.indexOf("@") - 1)
        );
      }
    }
  },

  created() {
    this.getParams();
  },
  mounted() {
    // this.selectData();
  },
  methods: {
    payPw(pw) {
      console.log("获取支付密码", pw);
      this.userpw = pw;
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^[0-9]*[1-9][0-9]*$/.test(value)) {
        /* eslint-disable-next-line */
        this.amountt = false;
        callback("请输入数字");
        return;
      } else {
        //console.log(value);
        callback();
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      if (!this.userpw) {
        this.$message.warning("请输入密码！");
      } else {
        if (this.userpw.length < 6) {
          this.$message.warning("请输入正确密码！");
        }
      }
      this.cashform.validateFields((err, values) => {
        if (!err) {
         
          var usermobileNo = this.seat.mobileNo;
          var params = { scope: "transfer", key: usermobileNo };
          api.fetchPubKey(
            params,
            res => {
              var pass = this.userpw;
             
              pass = api.getEncryptData(res.data.pubKey, pass);
            
              this.$axios
                .post("/agent/transfer/confirm", {
                  amount: this.seat.amount,
                  transMobileNo: this.seat.transMobileNo,
                  code: values.usercode,
                  payPassword: pass,
                  key: usermobileNo
                })
                .then(res => {
                  console.log(res);
                  if (res.data.code == "OK") {
                    this.$router.push({
                      name: "提现完成",
                      params: {
                        memberType: this.memberType,
                        isbind: true,
                        amount: this.seat.amount,
                        name: this.seat.transName,
                        mobileNo: this.seat.transMobileNo,
                        email:this.seat.transMobileNo
                      }
                    });
                  } else {
                    this.$message.error(res.data.message);
                  }
                });
            },
            error => {
              alert("错误");
            }
          );
        }
      });
    },
    getParams() {
      // 取到路由带过来的参数
      this.seat = this.$route.params.seat;
      this.Transfer = this.$route.params.Transfer;
      this.flag = this.$route.params.seat.flag;
      this.memberType = this.$route.params.memberType;

     
      // if(this.$route.params.seat.amount >= 100000){
      //   this.ifcode=true
      // }
      if (this.flag == true) {
         this.ifcode=true;
      } else {
        this.ifcode= false;
      }
    },

    sendcode() {
      const TIME_COUNT = 30;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.issend = false;
        this.$axios
          .get("/agent/customer/org/bank/mobile/vcode/" + this.seat.mobileNo)
          .then(res => {
            console.log(res);
            if(res.data.code == "OK"){

            }else{
              this.$message.warning(res.data.message)
            }
          });
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.issend = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style scoped>
.top {
  height: 50px;
}
.success {
  color: green;
}
.error {
  color: red;
}
.cardmessage {
  font-size: 16px;
}

.cardmsg {
  text-align: left;
}

#paypwd {
  display: flex;
  flex-direction: row;
}

.next-ok {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: 600;
  text-align: right;
}
</style>